<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="newList-page">
			<div class="new-ad" v-if="adList.length > 0">
				<u-swiper
					keyName="newsImage"
					:list="adList"
					showTitle
					height="321rpx"
					@click="clickAD"
					indicator
					indicatorMode="line"
				></u-swiper>
			</div>
			
			<div class="new-block fifter-div" style="background: #fff;">
				<div class="fifter-item" @click="showPicker('areaList')" :class="{'active': areaAddress != ''}">
					<span style="margin-right:10rpx;" class="fifter-item-span">{{areaAddress != '' ? areaAddress : '地区'}}</span>
					<u-icon name="arrow-down-fill" size="10" color="#B8B8B8" v-if="areaAddress == ''"></u-icon>
					<u-icon name="close-circle-fill" size="14" color="#FF5E01" v-else @click.native.stop="clearFifData('areaAddress')"></u-icon>
				</div>
				<div class="fifter-item" :class="{'active': showTime != ''}">
					<span style="margin-right:10rpx;" class="fifter-item-span"  @click="showPicker('timeList')">{{showTime != '' ? showTime : '时间'}}</span>
					<u-icon name="arrow-down-fill" size="10" color="#B8B8B8"  v-if="showTime == ''"></u-icon>
					<u-icon name="close-circle-fill" size="14" color="#FF5E01" v-else @click.native.stop="clearFifData('showTime')"></u-icon>
				</div>
				<div class="fifter-item" :class="{'active': state != ''}">
					<span style="margin-right:10rpx;" class="fifter-item-span"  @click="showPicker('stateList')" v-if="state == ''"> 状态</span>
					<span style="margin-right:10rpx;"  @click="showPicker('stateList')" v-else>{{state | fifstate}}</span>
					<u-icon name="arrow-down-fill" size="10" color="#B8B8B8"  v-if="state == ''"></u-icon>
					<u-icon name="close-circle-fill" size="14" color="#FF5E01" v-else @click.native.stop="clearFifData('state')"></u-icon>
				</div>
			</div>
			
			<div class="con-list-div new-block">
				<div class="new-block-item" v-for="item in list" :key="item.newsId" @click="toInfo(item)">
					<div class="new-img">
						<img :src="item.newsImage" style="width:100%;height:100%;object-fit: contain;"/>
						<div class="new-status" :style="{'background': item.timeStatus != '已结束' ? 'rgba(255,89,2,0.8)' : 'rgba(133,133,133,0.8)'}">{{item.timeStatus}}</div>
					</div>
					<div class="new-info">
						<div class="new-title exhib-title">{{item.newsTitle}}</div>
						<div class="new-time exhib-time">
							<img src="https://pic.moresu.com/FvRHG8lTvR-fQsAY7hMspuG2Th-4" style="width:19rpx;height:19rpx;margin-right:10rpx;margin-top:6rpx;">
							<span style="margin-left:10rpx;width:calc(100% - 19rpx)">{{ item.showTime }}至{{ item.showEndTime }}</span>
						</div>
						<div class="new-time exhib-time">
							<img src="https://pic.moresu.com/FmBBliEqF01CHCwq-w84yloideIO" style="width:19rpx;height:21rpx;margin-right:10rpx;margin-top:6rpx;">
							<span style="margin-left:10rpx;width:calc(100% - 19rpx)">{{ item.areaInfo }}</span>
						</div>
					</div>
				</div>
			</div>
			<div style="padding-bottom:40rpx;padding-top:40rpx">
			   <u-loadmore :status="status" ></u-loadmore>
			</div>
	</div>
	<u-picker :show="show" :columns="columns" :keyName="keyName" @close="show=false" @cancel="show=false" closeOnClickOverlay @confirm="confirmFif"></u-picker>
  </div>
</template>

<script>
 import {getNewsList,getNewsScreenAPI,pageSeo} from '@/config/api.js'
 
  import store from '@/store';
  const log = require('@/plugins/log.js')
  export default {
    components: {
     

    },
    data() {
      return {
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		keywords: "", //关键词搜索
		count:0,
		adList:[],
		areaAddress:'',//地区
		showTime: '',//时间
		state:'',//状态
		areaList:[],
		timeList:[],
		stateList:[{name:'待开始',key:1},{name:'进行中',key:2},{name:'已结束',key:3}],
		show:false,
		columns:[],
		keyName:'',
		popType:''
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
        this.areaAddress = ''
		this.showTime =  ''
		this.state = ''
		this.count = 0
		this.list = []
		this.clearData();
		this.getList()
		this.getAdlist()
		this.getFifList()
		
    },
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'expoListPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
		
	},

	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	filters:{
		fifstate(val){
			if(val == 1){
				return '待开始'
			}else if(val == 2){
				return '进行中'
			}else if(val == 3){
				return '已结束'
			}
		}
	},
	
    methods: {
		clearFifData(key){
			this[key] = ''
			this.searchList()
			
		},
		showPicker(key){
			this.popType = key
			this.columns = []
			this.columns.push(this[key]) 
			this.show = true
			
			if(key == 'areaList'){
				this.keyName = 'address'
			}else if(key == 'timeList'){
				this.keyName = 'time'
			}else{
				this.keyName = 'name'
			}
			
		},
		confirmFif(item){
			console.log(item)
			if(this.popType == 'areaList'){
				this.areaAddress = item.value[0].address
			}else if(this.popType == 'timeList'){
				this.showTime = item.value[0].time
			}else {
				this.state = item.value[0].key
			}
			this.show = false
			this.searchList()
		},
		getFifList(){
			getNewsScreenAPI().then((res) => {
				this.areaList = res.addressArr
				this.timeList=res.timeArr
			  }).catch((error) => {
				
			  })
		},
		getAdlist(){
			 let data = {}
		     data.newsType =  'EXPO_CENTER'
		     data.pageNum =  1
		     data.pageSize =  3
			this.adList = []
			getNewsList(data).then((res)=>{
				res.list.forEach((el)=>{
					this.adList.push({
						newsId:el.newsId,
						newsImage:el.newsImage,
						title:el.newsTitle
					})
				})
				console.log("this.adList",this.adList)
			})
		},
		clickAD(index){
			console.log("index",index)
			let item = this.adList[index]
			this.toInfo(item)
		},
		
		
		toInfo(item){
			console.log("-----------------")
			uni.navigateTo({
			  url: '/pagesCommon/exhibitionInfo?newsId='+item.newsId
			})
		},
		
		
		searchList(){
			this.clearData();
			this.getList()

		},
		
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.count = 0;
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			data.newsType = 'EXPO_CENTER'
			data.areaAddress = this.areaAddress
			data.showTime = this.showTime!= '' ? this.showTime+'-1-1':this.showTime
			data.state = this.state
			this.status = 'loading';
		    return	getNewsList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		
	}
	

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.newList-page{
	.new-ad{
		height:321rpx;
		margin-bottom:16rpx;
	}
	.new-block{
		margin-bottom: 16rpx;
		
		.new-block-item{
			padding:24rpx;
			background: #fff;
			border-bottom:1px solid #eee;
			@include flexbox(flex-start,center);
			.new-img{
				width: 282rpx;
				height: 158rpx;
				border-radius: 18rpx;
				overflow: hidden;
				border:1px solid #eee;
				position: relative;
				.new-status{
					position: absolute;
					right: 0;
					top:0;
					display: inline-block;
					padding:4rpx 20rpx;
					font-size: 24rpx;
					color:#fff;
				    border-radius: 0px 5px 0px 5px;
				}
			}
			.new-info{
				padding-left:18rpx;
				width:calc(100% - 282rpx);
				.new-title.exhib-title{
					font-size: 26rpx;
					color: #000000;
					@include textoverflow(2)
				}
				.new-sub-title{
					font-size: 24rpx;					
					color: #8B8B8B;
					@include textoverflow(2);
					margin-top:10rpx;
				}
				.new-time.exhib-time{
					@include flexbox(flex-start,flex-start);
					font-size: 24rpx;
					color: #8B8B8B;
					margin-top:10rpx;
				}
			}
		}
		.new-block-item:last-child{
			border-bottom:0
		}
	}
	.fifter-div.new-block{
		@include flexbox(space-around,center);
		.fifter-item{
			@include flexbox(center,center);
			max-width:33.33%;
			font-size: 24rpx;
			color: #000000;
			padding:24rpx;
			.fifter-item-span{
				max-width:90%;
				@include textoverflow(1)
			}
		}
		.active.fifter-item{
			color:#FF5E01;
			font-weight: bold;
		}
	}
}


</style>